<template>
	<view class="my-container">
		<view class="avatar flex flex-start">
			<u-avatar size='60' :src="userInfo.icon"></u-avatar>
			<view class="name-tep" v-if="userInfo.nickName" @click="handlePersonal()">
				<view class="name">{{userInfo.nickName}}</view>
				<view class="tep">{{userInfo.mobile}}</view>
			</view>
			<view class="name-tep" v-else>
				<view class="name" @click="getUserInfoLogin()">立即登录</view>
				<view class="tep">点击登录账号</view>
			</view>
		</view>
		<view class="curd-order">
			<view class="order-head flex-sb"><text class="title">我的订单</text><text class="desc"
					@click="handleOrder('all')">全部订单</text></view>
			<view class="order-content flex-sb">
				<view class="item flex flex-column" @click="handleOrder('payment')">
					<unt-icon name="icon-daifukuan" size="26" color="#01ab36"></unt-icon>
					<view class="item-name">待付款</view>
					<view class="order-num" v-show="orderNumber.obligationNum!=0">{{orderNumber.obligationNum}}</view>
				</view>
				<view class="item flex flex-column" @click="handleOrder('delivery')">
					<unt-icon name="icon-daifahuo" size="26" color="#01ab36"></unt-icon>
					<view class="item-name">待发货</view>
					<view class="order-num" v-show="orderNumber.waitDeliverNum!=0">{{orderNumber.waitDeliverNum}}</view>
				</view>
				<view class="item flex flex-column" @click="handleOrder('received')">
					<unt-icon name="icon-daishouhuo" size="26" color="#01ab36"></unt-icon>
					<view class="item-name">待收货</view>
					<view class="order-num" v-show="orderNumber.waitReceivingNum!=0">{{orderNumber.waitReceivingNum}}
					</view>
				</view>
				<!-- <view class="item flex flex-column" @click="handleOrder('comment')">
					<unt-icon name="icon-yiwanchengdingdan" size="26" color="#01ab36"></unt-icon>
					<view class="item-name">待评价</view>
				</view> -->
				<view class="item flex flex-column" @click="handleSell()">
					<unt-icon name="icon-tuihuoshouhou" size="26" color="#01ab36"></unt-icon>
					<view class="item-name">售后</view>
					<view class="order-num" v-show="orderNumber.afterSaleNum!=0">{{orderNumber.afterSaleNum}}</view>
				</view>
			</view>
		</view>
		<view class="curd-service">
			<view class="service-title">其他服务</view>
			<view class="item flex flex-column" @click="handleService(1)">
				<unt-icon name="icon-dizhi1" size="30" color="#01ab36"></unt-icon>
				<view class="item-name">收货地址</view>
			</view>
			<view class="item flex flex-column" @click="handleService(2)">
				<unt-icon name="icon-shengriliwu" size="30" color="#01ab36"></unt-icon>
				<view class="item-name">领卷中心</view>
			</view>
			<view class="item flex flex-column" @click="handleService(3)">
				<unt-icon name="icon-youhuijuan" size="30" color="#01ab36"></unt-icon>
				<view class="item-name">优惠劵</view>
			</view>
			<view class="item flex flex-column" @click="handleService(4)">
				<unt-icon name="icon-bangzhu1" size="28" color="#01ab36"></unt-icon>
				<view class="item-name">我的帮助</view>
			</view>
			<view class="item flex flex-column" @click="handleService(5)">
				<button class="btn-normal app-call" open-type="contact">
					<unt-icon name="icon-weixin2" size="32" color="#01ab36"></unt-icon>
					<view class="item-name"> 客服</view>
				</button>
			</view>
			<view class="item flex flex-column" v-show="userInfo.role=='1'" @click="handleScanCode">
				<unt-icon name="icon-saoma" size="32" color="#01ab36"></unt-icon>
				<view class="item-name">核销</view>
			</view>
		</view>
		<view class="Logout-clear" v-if="userInfo.nickName">
			<u-button text="退出登录" @click="handleLogout" shape="circle"></u-button>
		</view>
		<unt-tab-bar :index="3"></unt-tab-bar>
	</view>
</template>

<script>
	import * as UserApi from '@/api/user/index.js'
	import store from '@/store'
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: {},
				orderNumber: {
					afterSaleNum: 0,
					obligationNum: 0,
					waitDeliverNum: 0,
					waitReceivingNum: 0
				}
			}
		},
		onShow() {
			this.onRefreshPage();
		},
		methods: {
			handleScanCode() {
				this.$unts.navTo("pages_order/writeOff/writeOff");
			},
			// 跳转到修改个人信息页
			handlePersonal() {
				this.$unts.navTo("pages/my/personal/personal");
			},
			handleLogout() {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '您确定要退出登录吗?',
					success(res) {
						if (res.confirm) {
							store.dispatch('Logout', {})
								.then(result => app.onRefreshPage())
						}
					}
				})
			},
			handleSell() {
				this.$unts.navTo("pages_order/sell/sell");
			},
			// 刷新页面
			onRefreshPage() {
				// 判断是否已登录
				this.isLogin = this.$unts.checkLogin();
				// 获取页面数据
				this.getPageData();
			},
			// 获取页面数据
			getPageData(callback) {
				const app = this
				Promise.all([app.getUserInfo(), app.getOrderStatusNum()])
					.then(result => {
						// 执行回调函数
						callback && callback()
					})
					.catch(err => console.log('catch', err))
			},
			getOrderStatusNum() {
				UserApi.OrderStatusNum().then(res => {
					this.orderNumber = res.data;
				})
			},
			// 获取当前用户信息
			getUserInfo() {
				const app = this
				return new Promise((resolve, reject) => {
					!app.isLogin ? resolve(null) : UserApi.info({
							id: this.$store.getters.userId
						})
						.then(result => {
							app.userInfo = result.data;
							resolve(app.userInfo)
						})
						.catch(err => {
							if (err.result && err.result.status == 401) {
								app.isLogin = false
								resolve(null)
							} else {
								reject(err)
							}
						})
				})
			},
			getUserInfoLogin() {
				this.$unts.navTo("pages_moon/login/login");
			},
			// 订单页面跳转
			handleOrder(type) {
				this.$unts.navTo("pages_order/order/order", {
					dataType: type
				});
			},
			// 其他服务跳转
			handleService(index) {
				switch (index) {
					case 1:
						this.$unts.navTo("pages_moon/addres/addres");
						break;
					case 2:
						this.$unts.navTo("pages_moon/coupon/collarRoll/collarRoll");
						break;
					case 3:
						this.$unts.navTo("pages_moon/coupon/coupon");
						break;
					case 4:
						this.$unts.navTo("pages_moon/help/help");
						break;
					default:
				}
			},

		}
	}
</script>

<style lang="scss">
	button::after {
		border: none;
	}

	.my-container {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 160rpx;



		.avatar {
			width: 100vw;
			padding: 20rpx;

			.btn-normal {
				background: none;
				margin: 0;
				padding: 0;
				font-size: 28rpx;
				color: #fff;
				line-height: 1.5;
			}

			.name-tep {
				margin-left: 30rpx;

				.name {
					font-weight: bold;
					color: #fff;
					font-size: 40rpx;
				}

				.tep {
					font-size: 28rpx;
					margin-top: 20rpx;
					color: #fff;
				}
			}
		}

		.curd-order {
			margin-top: 40rpx;
			width: calc(100% - 40rpx);
			padding: 20rpx;
			background: #fff;
			box-shadow: 4rpx 4rpx 10rpx #e9ebed, -0rpx -0rpx 0rpx #e9ebed;
			border-radius: 20rpx;

			.order-head {
				margin-bottom: 20rpx;

				.title {
					font-weight: bold;
				}

				.desc {
					font-size: 28rpx;
					color: #999;
				}
			}

			.order-content {
				width: 100%;
				margin-top: 50rpx;
				margin-bottom: 10rpx;

				.item {
					width: calc(100%/5);
					position: relative;

					.item-name {
						font-size: 28rpx;
						margin-top: 10rpx;
					}

					.order-num {
						position: absolute;
						right: 0px;
						top: -20rpx;
						padding: 2rpx 15rpx;
						border-radius: 200rpx;
						background-color: #01ab36;
						color: #fff;
						font-size: 24rpx;
					}
				}
			}
		}

		.curd-service {
			width: calc(100% - 40rpx);
			margin-top: 60rpx;
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;
			box-shadow: 4rpx 4rpx 20rpx #e9ebed, -4rpx -4rpx 20rpx #e9ebed;
			border-radius: 20rpx;

			.service-title {
				width: 100%;
				font-weight: bold;
				margin-bottom: 40rpx;
			}

			.item {
				width: calc(100%/4);
				margin-bottom: 30rpx;

				.item-name {
					font-size: 28rpx;
					margin-top: 10rpx;
					color: #000;
					text-align: center;
				}

				.item-name:last-child {
					margin-top: 0px;
				}
			}
		}

		// 
	}

	.Logout-clear {
		width: 60%;
		margin-top: 40px;
	}

	.my-container:before {
		content: "";
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100%;
		height: 300rpx;
		// background-color: #54ba5e;
		background: linear-gradient(#01ab36, #ffffff);
		// background: linear-gradient(to top,#ffffff,#01ab36);
		z-index: -1;
	}
</style>